<template>
  <div>
    <el-dialog title="个人信息" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" label-width="80px">
        <tr>
          <td>
            <el-form-item label="姓名:">
              {{form.name}}
            </el-form-item>
          </td>
          <td>
            <el-form-item label="性别:">
              <el-radio-group v-model="form.sex" disabled>
                <el-radio :label="1">男</el-radio>
                <el-radio :label="0">女</el-radio>
              </el-radio-group>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item label="手机号:">
              {{form.phone}}
            </el-form-item>
          </td>
          <td>
            <el-form-item label="院校:">
              {{form.colleges}}
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item label="专业:">
              {{form.specialized}}
            </el-form-item>
          </td>
          <td>
            <el-form-item label="家庭住址:">
              {{form.address}}
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item label="学历:">
              <el-select v-model="form.degree" placeholder="请选择学历" clearable disabled>
                <el-option v-for="item in qw" :key="item.id" :label="item.degreeName" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </td>
          <td>
            <el-form-item label="政治面貌:">
              {{form.politicalface}}
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item label="民族:">
              {{form.ethin}}
            </el-form-item>
          </td>
          <td>
            <el-form-item label="籍贯:">
              {{form.origin}}
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item label="婚姻:">
              <el-select v-model="form.marriage" placeholder="请选择婚姻" clearable disabled>
                <el-option v-for="item in we" :key="item.id" :label="item.marriageName" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </td>
          <td>
            <el-form-item label="出生年月">
              {{Rud(form.dateofbirth)}}
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item label="邮箱:">
              {{form.email}}
            </el-form-item>
          </td>
          <td>
            <el-form-item label="身份证号:">
              {{form.socialsecuritynumber}}
            </el-form-item>
          </td>
        </tr>
        <h1>职业信息</h1>
        ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
        <tr>
          <td>
            <el-form-item label="部门:">
              <el-select v-model="form.buMen" placeholder="请选择部门" disabled>
                <el-option v-for="item in options" :key="item.id" :label="item.buMenName" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </td>
          <td>
            <el-form-item label="职位:">
              <el-select v-model="form.posts" placeholder="请选择职位" disabled>
                <el-option v-for="item in opp" :key="item.id" :label="item.postsName" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item label="员工状态:">
              <el-select v-model="form.type" placeholder="请选择员工状态" disabled>
                <el-option v-for="item in oo" :key="item.id" :label="item.stateName" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </td>
        </tr>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="姓名">
          <el-input v-model="formInline.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="formInline.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="部门">
          <el-select v-model="formInline.BuMen" placeholder="全部" clearable>
            <el-option v-for="item in options" :key="item.id" :label="item.buMenName" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职位">
          <el-select v-model="formInline.Posts" placeholder="全部" clearable>
            <el-option v-for="item in opp" :key="item.id" :label="item.postsName" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类别">
          <el-select v-model="formInline.Type" placeholder="全部" clearable>
            <el-option v-for="item in oo" :key="item.id" :label="item.stateName" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="Sel">查询</el-button>
          <el-button type="primary" @click="TianJia">新增员工</el-button>
          <el-button type="primary" @click="PiDel">批量删除</el-button>
          <el-button icon="el-icon-thumb" @click="Reset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
        </el-table-column>>
        <el-table-column label="姓名" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="性别" width="180">
          <template slot-scope="scope">
            <el-tag type="success">{{ scope.row.sex==1?"男":"女" }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="部门" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.bu }}</span>
          </template>
        </el-table-column>
        <el-table-column label="职位" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.zhi }}</span>
          </template>
        </el-table-column>
        <el-table-column label="手机号" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.phone }}</span>
          </template>
        </el-table-column>
        <el-table-column label="院校" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.colleges }}</span>
          </template>
        </el-table-column>
        <el-table-column label="专业" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.specialized }}</span>
          </template>
        </el-table-column>
        <el-table-column label="家庭地址" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.address }}</span>
          </template>
        </el-table-column>
        <el-table-column label="入职日期" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ Rud(scope.row.ruDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="工龄" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.seniority }}</span>
          </template>
        </el-table-column>
        <el-table-column label="类别" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.zhuang }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.state }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建日期" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ Rud(scope.row.createDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="Fan(scope.row.id)">编辑</el-button>
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">查看</el-button>
            <el-button size="mini" type="danger" @click="Delete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageIndex"
        :page-sizes="[1, 3, 5, 7]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      dialogFormVisible: false,
      form: {
        name: '',
        sex: '',
        phone: '',
        colleges: '',
        specialized: '',
        address: '',
        degree: '',
        politicalface: '',
        ethin: '',
        origin: '',
        marriage: '',
        Dateofbirth: '',
        email: '',
        socialsecuritynumber: "",
        BuMen: '',
        Posts: '',
        Type: "",
      },
      formLabelWidth: '120px',
      formInline: {
        name: '',
        phone: '',
        BuMen: '',
        Posts: '',
        Type: "",
      },
      tableData: [],
      pageIndex: 1,
      pageSize: 3,
      total: 0,
      options: [],
      opp: [],
      oo: [],
      qw: [],
      we: [],
      multipleSelection: []
    }
  },
  created () {
    this.Sel();
    this.BingBu();
    this.BingType();
    this.BingZhi();
    this.BingXue();
    this.BingHun();
  },
  methods: {
    TianJia () {
      this.$router.push("/EmpAdd")
    },
    PiDel () {
      var ids = []
      for (let i = 0; i < this.multipleSelection.length; i++) {
        ids.push(this.multipleSelection[i].id)
      }
      if (ids.length <= 0) {
        this.$message({
          message: '请选择一条数据',
          type: 'warning',
        });
        return
      }
      if (confirm("确定批量删除吗？")) {
        this.$http({
          url: "https://localhost:44357/api/Emp/PiDel?ids=" + ids.toString(),
          method: "delete",
        }).then((r) => {
          if (r.data > 0) {
            this.$message({
              message: '警告哦,删除成功！',
              type: 'warning'
            });
            this.Sel();
          }
        })
      }
    },
    Rud (val) {
      var date = new Date(val)
      return date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDay() + "日";
    },
    Reset () {

      this.$router.go(0);
    },
    BingBu () {
      this.$http({
        url: "https://localhost:44357/api/Emp/BingBu",
        method: "get",
      }).then((r) => {
        this.options = r.data;
      })
    },
    BingZhi () {
      this.$http({
        url: "https://localhost:44357/api/Emp/BingZhi",
        method: "get",
      }).then((r) => {
        this.opp = r.data;
      })
    },
    BingType () {
      this.$http({
        url: "https://localhost:44357/api/Emp/BingType",
        method: "get",
      }).then((r) => {
        this.oo = r.data;
      })
    },
    BingXue () {
      this.$http({
        url: "https://localhost:44357/api/Emp/BingXue",
        method: "get",
      }).then((r) => {
        this.qw = r.data;
      })
    },
    BingHun () {
      this.$http({
        url: "https://localhost:44357/api/Emp/BingHun",
        method: "get",
      }).then((r) => {
        this.we = r.data;
      })
    },
    Delete (id) {
      if (confirm("确定要删除嘛")) {
        this.$http({
          url: "https://localhost:44357/api/Emp/Deleteshu",
          method: "delete",
          params: {
            id: id,
          },
        }).then((res) => {
          if ((res.data = 200)) {
            this.$message.error('恭喜你，删除员工成功！');
            this.Sel();
          }
        });
      }
    },
    Sel () {
      this.$http({
        url: "https://localhost:44357/api/Emp/GetEmp",
        method: 'get',
        params: {
          name: this.formInline.name,
          phone: this.formInline.phone,
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
          BuMen: this.formInline.BuMen,
          Posts: this.formInline.Posts,
          Type: this.formInline.Type,
        }
      }).then((r) => {
        this.tableData = r.data.data;
        this.total = r.data.total
      })
    },
    handleSizeChange (val) {
      this.pageSize = val;
      this.Sel();
    },
    handleCurrentChange (val) {
      this.pageIndex = val;
      this.Sel();
    },
    Fan (row) {
      document.cookie = row;
      localStorage.setItem("kqxq", row);
      this.$router.push("/EmpFan");
    },
    handleEdit (index, row) {
      this.dialogFormVisible = true;
      this.form = row;

      console.log(index, row);
    },
    handleDelete (index, row) {
      console.log(index, row);
    },
    handleSelectionChange (val) {
      this.multipleSelection = val;

    }
  }
}
</script>
